Working with Statements and Selectors

In this chapter we will learn more about statements, and how to create and edit them. In particular, we will learn about the different types of selector, and how to use them.

We'll also look at the other kinds of statement in a style sheet - Comments, HTML comments and @-rules.

What is a Statement?

You might recall from previous chapters that a style sheet essentially comprises a set of statements. A statement is an instruction to a web browser that tells it how to draw a particular type of element. Statements themselves are made up of two parts, a selector, which we look at in detail in this chapter, and a declaration. The declaration is covered in the Properties section of the manual.

To learn more about the different types of statement follow the links to the Style Sheets Guide (it appears in the frame at the bottom of this page).

Creating a New Statement

To create a new statement

1. choose New Statement… from the Statement menu

The following dialog box opens:

2. choose a type of selector using the pop-up menu, then click Create

Depending on the type of selector you chose for the statement, one of several possible selector editing windows opens. Next we talk about this different kinds of selector.

Selector Types

It isn't the aim of this manual to teach you everything there is to know about style sheets. Our aim is to cover every aspect of Style Master. Along the way we do cover essential aspects of style sheets. Selectors are an aspect of style sheets that we do not have time to cover in real detail. However, we have a whole section on selectors in detail in our Style Sheets Guide. This part of the tutorial should currently appear in a frame at the bottom of the page. Clicking links to the Guide in this chapter of the manual will put the relevant part of the tutorial in the bottom frame. If you don't have the Style Sheets Guide see Welcome for details on where to get it.

There are several kinds of selector, each identifies elements in a web page in different ways.We will take a short look at each kind of selector.

HTML Element Selector

The most straightforward type of selector is the HTML element selector. This selects any element marked up with a particular HTML tag, for example, paragraphs (marked up with <P></P>) and tables (marked up as <Table></Table>).

To create a HTML element selector

1. choose New Statement… from the Statement menu

2. choose HTML Element Selector from the pop-up menu in the New Statement dialog.

The HTML Element Selector Editor opens.

At the top of this window there is a pop-up menu that lets you choose the set of HTML tags from which you want to choose the HTML Element Selector. This can make it easier to locate an HTML tag.

To create the selector

1. click the HTML element you want the selector to specify

2. click Create

You'll notice that at the bottom of the window, Style Master explains to you what this selector does. In general, a selector identifies a type of element. In this case, this selector identifies (or selects) paragraph elements, that is, elements marked up with the <P>tag.

With HTML element selectors, you can create statements that tell a browser how to draw any HTML element.

But selectors can do more than simply select every paragraph, table and so on in a page. Read on to find out about other types of selectors, and what they let you do.

Class Selector

Class selectors identify either

every element of a particular class
or specific elements of a particular class

Let me explain first what a class of element is, and then the difference I have just outlined.

Class in HTML

HTML 4, the most recent HTML standard, introduced a new attribute, the class attribute. Any element can have a class. If you are familiar with HTML, the syntax in HTML for giving an element a class is

That is, you add the attribute specifier class="class name" to the usual HTML tag.

If you work with text based HTML editors, you'll know exactly what I'm talking about, and how to add classes to your HTML documents. If you work with visual tools, like Frontpage, HomePage and PageMill, this might not make a lot of sense to you, and more importantly, you might not know how to give elements a class. Although it is outside the scope of this manual, you may have to manually add the class attribute, which can be dangerous if you are completely unfamiliar with HTML code. If that is your case, but you want to try and manually add class to your elements, make sure that you work on a copy of your HTML documents, not the originals, so that if you mess everything up, you will be able to revert to the originals.

Two kinds of Class Selector

I mentioned before that there are two kinds of class selectors.

In the first kind of class selector, only the class is important. This means that any kind of element, provided that it has the right class, will be selected by this kind of class selector. So, for example, if we specify a class "explanation" in our statement, any Paragraph of this class, and any Heading of this class, and indeed any other type of element of this class will be selected. In Style Master we refer to these type of class selectors as a "Solitary Class Selector".

In the second type of class selector, not only must the element have the right class, it must be of a particular type as well. So, if we specify a selector of type paragraph, and class "explanation" then only paragraphs of class "explanation" will be selected. Other kinds of paragraph, and other elements of class "explanation" will not be selected. In Style Master we refer to these type of class selectors as a "Class Selector".

To create a class selector

1. choose New Statement… from the Statement menu

2. choose Class Selector from the pop-up menu in the New Statement dialog.

The Class Selector Editor opens.

You will notice that it is quite similar to the HTML Element Selector Editor we saw above. To create a class selector you first specify whether it is of the first or second kind that we just talked about.

If it is of the first kind

3a. click the Solitary Class Selector radio button.

Otherwise

3b. click the Class Selector radio button (as in this case).

If you are creating a class selector

4a. click the HTML Element tag that specifies the type of element. This is the same as creating a HTML element selector.

Now, for either kind of class selector

4b. type the class name in the class name field.

As we saw with HTML element selectors, Style Master explains precisely what the selector you have created does.

By the way, if you can't type certain characters into this field, that's because only certain characters are allowed. Style Master will only let you type valid names. The rules?

names must be alphabetical, numerals or the hyphen (no spaces, underscores or other characters)
names must begin with an alphabetical character (not a numeral)

ID Selector

ID selectors are very similar to class selectors. The difference is that while any number of elements on a page may have the same class value, only one single element on a web page may have a given ID. Apart from this difference, ID selectors work in the same way as class selectors.

To create an ID selector

1. choose New Statement… from the Statement menu

2. choose ID Selector from the pop-up menu in the New Statement dialog

The ID Selector Editor opens.

See the discussion of the Class Selector Editor above for more on how to create an ID selector using the editor.

Contextual Selector

Contextual selectors select elements when they are contained by other elements. For example, let's take the bold tag. Inside a normal paragraph of text, this makes the marked up text appear heavier than the surrounding text. But what happens when you use the bold tag inside a heading? Because the text of a heading is already (usually) bold, the bold tag has no effect.

The contextual selector let's you tell a browser how to draw an element in a particular context, in this case, when a bold element is contained by a heading element.

To create a Contextual Selector

1. choose New Statement… from the Statement menu

2. choose Contextual Selector from the pop-up menu in the New Statement dialog which opens

The following editor opens

Essentially, a contextual selector is an ordered list of selectors. They can be simple HTML elements selectors, class selectors, ID selectors, as well as other selectors we will shortly come to (selector lists, pseudo class selectors and pseudo element selectors).

To add HTML element selectors to the contextual selector

1. double click a HTML element in the scrolling list on the left of the window or click an element in this list then click Add

This adds the element to the bottom of the list at the right of the window.

Let's take a quick look at this scrolling list. The list represents the contextual selector. For example, the entries in the list above (from top to bottom) are "H1" and "Em". This selector would refer to (or select) any <EM> element inside any <H1> element.

I said before that contextual selectors may include selectors other than the simple HTML Element selectors.

To add another kind of selector

1. click the Other Selector… button

A dialog box similar to the New Statement dialog opens

2. choose the type of selector from the pop-up menu, as you would when creating a new statement, then click OK

A selector editor opens, to let you edit the type of selector you chose to create. Refer to the various parts of this chapter for specific details about how to edit different types of selector.

Because the order of selectors in the list is important you may want to reorder the list

To Reorder the list of statements

1. click the element you want to move

2. drag the element to the place in the list where you would like it to be

3. drop the selector there by releasing the mouse.

To remove a selector from the list

1. click the selector to select it

2. click the Remove button

As with the other selector editor, at the bottom of the window Style Master explains precisely what the selector you have created will do.

Pseudo Class Selector

The pseudo class selector has a very specific task- it lets you select links in one of four states:

link: the usual state of an unvisited link
visited: a link when the browser knows that it has been visited
active: a link while it is being clicked
hover: a link while the cursor is over it (Internet Explorer 4 only)

To create a pseudo class selector

1. choose New Statement… from the Statement menu

2. from the New Statement dialog box that opens, choose Pseudo Class Selector from the pop-up menu then click Create

The Pseudo Class Selector Editor opens

You can create three variants of pseudo classes

a simple pseudo class
a class pseudo class - here a link has both a class (for example "offsite") and a state
an ID pseudo class - here a link has both an ID and a state

Note: the class and ID variants are advanced features of style sheets. You may rarely find yourself needing to take advantage of them.

Creating a pseudo class selector is very straightforward

To specify which pseudo class variant you want to create

1. choose Simple, Class or ID from the pop-up menu at the top of the window

If you chose Simple, then move on to step 3 below

If you chose Class or ID, you need to provide a class or ID value

To provide a class value

2a. enter the class name in the field in the middle of the window

To provide an ID value

2b. enter the ID value in the field in the middle

you are now ready to choose the link state.

3. choose the link state from the pop-up menu at the right of the window

As with other selector editors, Style Master explains what the selector you have created will do.

If you have chosen Netscape Navigator 4, or CSS1 and CSSP as one of your targeted browsers, you'll notice that a warning button appears to the left of the pop-up menu. This lets you know that there is a potential problem with using one of the chosen browsers with this selector type. Click the warning and Style Master explains the problem. In this case, it is that Navigator does not support the hover pseudo class. We'll be seeing a lot of this type of warning when we get to the properties editors.

Pseudo Element Selector

Pseudo element selectors, like pseudo class selectors, provide for a very specific type of selection. In this case, the selector identifies the first letter or the first line of an element.

To create a pseudo element selector

1. choose New Statement… from the Statement menu

2. in the New Statement dialog box that opens, choose Pseudo Element Selector from the pop-up menu

the Pseudo Element Selector Editor opens.

A pseudo element selector specifies both the element (using an HTML element selector, or other kind of selector) and either the first-line or first-letter value.

To specify the element

1a. click the name of the element from the scrolling list toward the top of the window

1b. if you want to specify the element using another type of selector, click Other Selector…

in this case, a dialog opens, similar to the New Statement dialog box.

2. choose the type of selector from the pop-up menu, then click Create

An editor for the type of selector you chose opens. Use this editor to create the selector.

To specify whether it is the first letter or line that is selected by this selector

1. choose either first-line or first-letter from the pop-up menu.

As with all the selector editors, Style Master explains what the selector you have created will do.

2. click Create to close the editor, creating the new selector

Selector Group

The last type of selector we will look at, the Selector Group, isn't really a selector, rather a shorthand way of defining properties for more than one selector at a time. It makes style sheets smaller, and helps you ensure that like elements do appear similarly.

To create a selector group

1. choose New Statement… from the Statement menu

in the New Statement dialog box that opens

2. choose New Selector Group

The Selector Group Editor opens.

Selector groups are edited similarly to contextual selectors. They are simply a list of selectors of any type.

To add an HTML element selector to the list

1a. double click the name of the element you want to add to the list

1b. select the element name by clicking it

2. click Add

To add another type of selector to the list in the group

1. click Other Selector…

a dialog box like the New Statement dialog opens

2. choose the type of selector that you want to add to the list, then click Create

an Editor opens for editing the selector

when you have finished editing the selector

3. click Create and the selector will be added to the list

To remove an element from the list

1. click the element in the list to the right of the window then

2. click Remove

Changing the Selector of a Statement

If you have created a selector for a statement, but you want to change it to another type of selector (while keeping any properties you might have already defined for the statement)

1. click the statement in the list of statements in the style sheet window whose selector you want to change

2. choose Change Selector… from the Statement menu

a dialog box similar to the New Statement dialog box opens

3. choose the type of selector that you want to change this selector to

4. click Create

the Editor for this type of selector opens.

As far as possible, Style Master tries to keep the existing information from the selector.

For more on each type of selector and editor, see above.

Editing the Selector of a Statement

Rather than changing the type of a selector, you may just need to edit the value of the selector.

To edit the value of a selector

1a. click the statement in the list of statement in the style sheet window that you want to edit the selector of

2. choose Edit Statement… from the Statement menu

1b. double click the statement to edit

the editor for the selector you are editing opens. Edit the value of the selector as you did when you created it. See above for editing selectors.

Style Master also lets you edit a selector directly (a feature you should only take advantage of if you know what you are doing).

Editing a Selector Directly

If you are very familiar with style sheets, you might find that in some cases, the editors are a bit of a "long way" of doing things. To let very proficient style masters directly enter their selectors, Style Master provides an editor for simply typing the selector in as text.

You can subsequently edit this selector using the relevant editor, or directly once more. See above for editing selectors, and editing selectors directly.

You can also edit a selector directly in the style sheet window, without using an editor.

To edit a selector in the style sheet window

1. select the statement whose selector you want to edit from the list of statements on the left of the style sheet window

2. click in the field labeled Selector

3. type the selector, or paste a selector you've copied elsewhere into this field

4. when you exit this field (by clicking the list of statements, or switching to another window) the edited selector is placed in the list of statements

Be careful here, this is a power feature. If you use a selector editor, you won't make syntax errors, but if you use this feature, the selector you create might be incorrect, which can cause havoc with your style sheets. Only use it if you are sure that the selector is correct. Style Master will try to make it correct, but it can't read minds.

To create a new selector directly

1. choose New Statement… from the Statement menu

2. choose Any Selector from the pop-up menu in the New Statement Selector which opens

the following editor opens

type the name of the selector in the field labeled Selector

3a. click Create to create the new selector

3b. click Cancel to close the window without creating the new selector

Note, it is your responsibility to create a valid selector.

To edit any selector directly using the Any Selector editor

1. option double click the entry in the list of statements on the left of the style sheet window

Removing a Statement

To remove a statement from a style sheet

1. click the statement in the list of statements in the style sheet that you want to remove

2. choose Remove Statement from the Statement menu

If you remove the wrong statement, you can undo using the Undo menu item in the Edit menu.

Reordering Statements

The order of statements in a style sheet is of some importance (although not enough to worry about while you are learning about them). Style Master lets you reorder the statements in a style sheet.

To reorder the list of statements

1. click and drag the statement you want to reorder

2. drop the statement where you want it in the list of statements for the style sheet

Other Kinds of Statement

In addition to the statements we have already seen (sometimes referred to as rules) a style sheet can contain three other kinds of statement

Comments
HTML Comments
@-rules

Comments

Comments help you understand your own style sheet (if you have a complex style sheet, and you come back to it after some time, you might have trouble remembering what each and every statement is for) or help someone else understand your style sheet.

To create a comment

1. choose New Statement… from the Statement menu

2. choose Comment from the pop-up menu in the New Statement dialog

3.click Create

a comment editor opens.

4. fill in the comment and click OK

HTML Comment Tags

Because style sheets can be embedded in HTML documents, and because older browsers may not be able to recognize them, it is permissible to place HTML comment tags () anywhere within a style sheet.

To place an HTML comment tag in the list of statements

1. choose New Statement… from the Statement menu

2. choose HTML Comment Tag from the pop-up menu in the New Statement dialog

3. click Create

an HTML Comment Tag Editor opens.

4. choose the HTML Tag you want to place in the style sheet from the pop-up menu

5. click OK

@-rules

@-rules are instructions to browsers to perform operations other than drawing elements. At present, only the @import rule is recognized. This instructs a browser to import a style sheet to be used in conjunction with the current one.

To create an @import rule

1. choose New Statement… from the Statement menu

2. choose @-rule from the pop-up menu in the New Statement dialog

3. click Create

an @-rule Editor opens

To edit the @-rule

1. type or paste the relative path (from the current style sheet to the imported style sheet) or the absolute URL of the imported style sheet.

2. click Locate File… and use the open dialog to locate the style sheet you want to import.

Style Master creates the relative path in this case.

Note: Locate File… will be unavailable if the current style sheet hasn't been saved, because it isn't possible to create a relative path from this style sheet as it doesn't really have a location yet.

In this Chapter

In this chapter we learnt about statements, and selectors. We learnt

how to create a statement and its selector
about the different kinds of selectors and how to create and edit them
about changing the selectors of a statement
how to reorder the statements in a style sheet
how to remove the statements from a style sheet

In the next chapter we are going to look at properties, the fun part of style sheets, and learn how to give web pages a whole new appearance.